{extend name="layouts@base" /}
{block name="head"}
<link rel="stylesheet" href="__STATIC__/mobile/default/css/orderDetails.css" />
{/block}
{block name='pageType'}afterSale{/block}
{block name="main" }
    <div class="page-bd">
        <!-- 页面内容-->
        <div class="goodsbox">
            <a href="商品.html" class="goods">
                <img src="{$orderInfo.goodsinfo.pic}" alt="">
                <div class="goodsinfo">
                    <p class="fs28 color_3">{$orderInfo.goodsinfo.goods_name}</p>
                    <div class="appleBox"><span class="fs28 color_9">{$orderInfo.goodsinfo.sku_name}</span></div>
                    <div class="money">
                        <div class="color_3 fs24 num"><p class="fw_b fm_p">￥</p><em class="fs36">{$orderInfo.goodsinfo.exp_price[0]}</em><i>.{$orderInfo.goodsinfo.exp_price[1]}</i>
                        </div>
                        <em class="fs28 color_3">x<span>{$orderInfo.goodsinfo.goods_number}</span></em></div>
                </div>
            </a>
            <div class="title selectBox">
                <div class="fs28 fw_b color_3">服务类型</div>
                <!-- <span class="fs28 color_3 tag_active">退货</span><span class="fs28 color_3">换货</span> --><span
                    class="fs28 color_3 tag_active">退货退款</span>
            </div>
            <div class="number">
                <span class="fw_b color_3 fs28">申请退货数量</span>
                <div class="inputBox">
                    <img src="__STATIC__/mobile/default/images/goodsIcon05.png" alt="" class="minus">
                    <input type="text" value="{$orderInfo.goodsinfo.goods_number}" name="goods_number" class="fs28 color_3 goods_number">
                    <img src="__STATIC__/mobile/default/images/goodsIcon06.png" alt="" class="add">
                </div>
            </div>
        </div>
        <div class="inputBlock animateBox">
            <div class="tips fs38 fw_b color_9" style="font-size: 0.173333rem;top:0.2rem;">退款金额(元)</div>
            <input type="text" class="fs38 num textBox goods_money" disabled value="{$orderInfo.refund_amount}">
        </div>
        <div class="textBlock animateBox">
            <div class="tips fs38 fw_b color_9">退款原因</div>
            <!-- <input type="text" class="fs28 fw_b">  -->
            <textarea rows="2" class="fs28 fw_b textBox" id="textBox"></textarea>
        </div>
        <div class="block">
          <div class="uploading">
            <div class="title fs32 fw_b color_3">上传照片</div>
            <div class="uploadBox" >
              
               <div class="Box">
                  <img src="__STATIC__/mobile/default/images/addImg.png" alt="" class="imgBox">
                  <input type="file" class="uploadInput" onchange="uploadFile(this,event)">                  
                </div>
                <div></div>
            </div>
          </div>
        </div>
        <div class="button fs32 fw_b color_w BGcolor_r">提交申请</div>

    </div>
</div>
{/block}
{block name="footer"}
<!-- <script src="__STATIC__/mobile/default/js/lib/jquery-2.1.4.js"></script>
<script src="__STATIC__/mobile/default/js/lib/fastclick.js"></script>
<script src="__STATIC__/mobile/default/js/art-template.js"></script> -->
<script>
    var count_number = "{$orderInfo.goodsinfo.goods_number}";
    var sale_price = "{$orderInfo.goodsinfo.sale_price}";
    $(function () {
        FastClick.attach(document.body);
    });
</script>
<script>
    $('.selectBox span').on('click', function () {
        $(this).addClass('tag_active')
        $(this).siblings().removeClass('tag_active')
    })
    // 0.173333rem
    $('.textBox').on('click', function () {
        $(this).siblings().animate({'fontSize': '0.173333rem', 'top': '0.2rem'})
    })
    $('.inputBlock input').blur(function () {
        if ($(this).val() == '') {
            $(this).siblings().animate({'fontSize': '0.253333rem', 'top': '0.36rem'})
        }
    })
    $('.textBlock input').blur(function () {
        if ($(this).val() == '') {
            $(this).siblings().animate({'fontSize': '0.253333rem', 'top': '0.493333rem'})
        }
    })
    $('.number input').on('click', function () {
        event.preventDefault();
    })
    //减
    $('.minus').on('click', function () {
        event.preventDefault();
        var numVal = parseInt($(this).siblings('input').val()) - 1;
        if (numVal <= 0) {
            return
        } else {
            $(this).siblings('input').val(numVal);
            $('.goods_money').val((numVal*sale_price).toFixed(2));
        }
    })
    //加
    $('.add').on('click', function (event) {
        event.preventDefault();
        var numVal = parseInt($(this).siblings('input').val()) + 1;
        if (numVal > count_number) {
            numVal = count_number;
        }
        $(this).siblings('input').val(numVal);
        $('.goods_money').val((numVal*sale_price).toFixed(2));
    })
</script>
<script>
    var isPost = false;
    var fd = new FormData();
    var imgNum = 0;
    $('.BGcolor_r').click(function(){
        //console.log(fd.get("imgfile["+imgNum+"]"));
        var re = /[\u4E00-\u9FA5]/g; //测试中文字符的正则
        var content = $('#textBox').val();
        if (re.test(content)){ //使用正则判断是否存在中文   
            if (content.match(re).length <= 10) { //返回中文的个数
                _alert("原因不能小于10个汉字.");
                return false;
            }
        }else{
            _alert("原因不能小于10个汉字.");
            return false;
        }
        var goods_number = $('.goods_number').val();
        fd.append("is_html", 1);
        fd.append("saleafter_type", 1);
        fd.append("sku_val", "{$orderInfo.goodsinfo.sku_val}");
        fd.append("sku_name", "{$orderInfo.goodsinfo.sku_name}");
        fd.append("goods_name", "{$orderInfo.goodsinfo.goods_name}");
        fd.append("goodsnum", goods_number);
        fd.append("goods_pic", "{$orderInfo.goodsinfo.pic}");
        // fd.append("images_list", '/upload/gimg/20190305/5c7df3af3ae24_thumb.png,/upload/gimg/20190305/5c7df3af3ae24_thumb.png,/upload/gimg/20190305/5c7df3af3ae24_thumb.png,/upload/gimg/20190305/5c7df3af3ae24_thumb.png,/upload/gimg/20190305/5c7df3af3ae24_thumb.png');
        fd.append("order_sn", "{$orderInfo.orderinfo.order_sn}");
        fd.append("order_id", "{$orderInfo.orderinfo.order_id}");
        fd.append("rec_id", "{$orderInfo.goodsinfo.rec_id}");
        fd.append("refund_amount", sale_price);
        fd.append("refund_reason_value", content);
        
        $.ajax({
              url: '{:url("shop/api.order/dosaleaftergoods")}',
              type: 'post',
              processData: false,
              contentType: false,
              data: fd,
              success: function (res) {
                 if (res.code == 0){
                      _alert(res.msg);
                      return false; 
                  }
                  _alert('申请成功！','{:url("shop/order/salereturns")}');             
              }
        })


    })
</script>
<script>
    //删除上传图片
    $('.uploadBox').on('click','.closeImg',function(){
        $(this).parent().remove();
        fd.delete("imgfile["+$(this).data('imgnum')+"]");
    })
    //选择上传图片
    function uploadFile(_this,e){   
        compress(e, function(base64Img){
            if (imgNum > 6){
                _alert('最多允许上传6张图片.');
                return false;   
            }
            imgNum++;
            fd.append("imgfile["+imgNum+"]", base64Img);
            $(_this).parent().before('<div class="Box"><img src="'+base64Img+'" alt="" class="imgBox"><img src="__STATIC__/mobile/default/images/closeImg.png" alt="" data-imgnum="'+imgNum+'" class="closeImg"></div>');
        })

    }
</script>
{/block}
